<template>
  <div class="body">
    <div id="wrap">
      <div id="firstHeader" class="titlebar activebar">
        <div class="egret-header topbar normalHeader">
          <div class="egret-header-box egret-img fl" @click="$router.go(-1)">
            <img src="../style/img/ic-back.png">
          </div>
          <div class="egret-header-box">
            <div class="egret-header-search">
              <img src="../style/img/4-header_search.png" alt>
              <input type="text" placeholder="搜索社团、活动、店家">
            </div>
            <button class="btn-search" @click="search">搜索</button>
          </div>
        </div>
        <div class="category">
          <div class="tab tab-line" @click="selectOne(1)">全部</div>
          <div class="tab tab-line" @click="selectOne(2)">社团</div>
          <div class="tab tab-line" @click="selectOne(3)">活动</div>
          <div class="tab" @click="selectOne(4)">店家</div>
        </div>
      </div>
    </div>
    <div id="main">
      <div class="">
        <!--初始化-->
        <div v-show="status">

          <!--發現社團-->
          <div class="member">
            <font>社團</font>
            <font class="rightMore" @click="toMore(1)">
              探索更多
              <span class="morepic"></span>
            </font>
          </div>
          <div class="colllege boxShadow">
            <div class="list" v-for="(society,index) in societyList" :key="index" @click="jump(society.sid)">
              <div
                class="leftIcon"
                :style="{background: 'url(https://weyouth.vip'+ society.photo + ')'}"
              ></div>
              <div class="purple">{{society.name}}</div>
              <div class="onePurple">
                {{society.count}}位成员
                <span class="mopic"></span>
              </div>
            </div>
          </div>

          <!--發現活動-->
          <div class="member">
            <font>活動</font>
            <font class="rightMore" @click="toMore(2)">
              探索更多
              <span class="morepic"></span>
            </font>
          </div>
          <div class="news boxShadow">
            <div class="todeList" v-for="(li,index) in activityList" :key="index" @click="details(li.aid)">
              <div class="small">
                <div class="leftPic" :style="{background: 'url(https://weyouth.vip'+ li.photo + ')'}"></div>
              </div>
              <div class="rightFont at-content">
                <div class="title fontWeight">{{li.title}}</div>
                <div class="title lineHeight colorGrey">
                  <span>{{li.society}}</span>
                  <a class="last colorGrey">剩余席位{{li.limit}}</a>
                </div>
                <div class="title colorGrey">
                  <span class="backGrey">{{li.start_time|formatDate}}</span>
                  <span class="backGrey">{{li.type}}</span>
                  <span class="backGrey">{{li.cost}}</span>
                </div>
                <div class="title position">
                  <span class="maplog"></span>
                  <span class="address">
                  {{li.address}}
                  </span>
                  <span class="details" @click="details(li.aid)">詳情</span>
                </div>
              </div>
            </div>
          </div>

          <!--發現店鋪-->
          <div class="member">
            <font>店鋪</font>
            <font class="rightMore" @click="toMore(3)">
              探索更多
              <span class="morepic"></span>
            </font>
          </div>
          <div class="news boxShadow">
            <div class="todeList" v-for="(key,index) in store" :key="index">
              <div class="small3">
                <div class="leftPic pic" :style="{background: 'url(https://weyouth.vip'+ key.photo + ')'}"></div>
              </div>
              <div class="rightFont">
                <div class="title fontWeight">{{key.name}}</div>
                <div class="title lineHeight colorGrey">{{key.address}}</div>
                <div class="title colorGrey">
                  <span class="backGrey discount">{{key.discount}}</span>
                </div>
                <div class="title position">
                  <span class="tel">TEL:{{key.phone}}</span>
                  <div class="cricle1"  @click="toPhone(key.phone)"></div>
                  <div class="cricle2" @click="toWebsite(key.website)"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--搜索結果-->
        <div v-show="!status">

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { isLogin } from '@/api/login'
import { getStore, getSociety } from '@/api/society'
export default {
  name: 'Search',
  data () {
    return {
      store: [],
      type: '',
      status: true,
      societyList: [],
      activityList: []
    }
  },
  filters: {
    formatDate: function (value) {
      return value.slice(5, 10).replace('-', '月') + '日'
    }
  },
  created () {
    this.isLogin()
    this.loadData()
  },
  methods: {
    isLogin () {
      isLogin().then(res => {
        if (res.code === 0) {
          alert('请先登录')
          this.$router.push('/login')
        }
      })
    },
    jump (sid) {
      this.lockerVisible = false
      this.$router.push({
        path: '/assn_details',
        query: {
          sid: sid
        }
      })
    },
    details (aid) {
      this.$router.push({
        path: '/activity_details',
        query: {
          aid: aid
        }
      })
    },
    toMore (n) {
      switch (n) {
        case 1: this.$router.push('/assn_list#more')
          break
        case 2: this.$router.push('/activity_list')
          break
        case 3: this.$router.push('/not_use')
          break
      }
    },
    loadData () {
      getSociety().then(res => {
        console.log(res)
        const reqDate = res.data
        this.society = reqDate.society
        this.activity = reqDate.activity // 活动总数
        this.user = reqDate.user // 用户总数
        this.activityList = reqDate.activityList // 活动列表
        this.societyList = reqDate.societyList // 社团列表
        var img = this.userPhoto
        // var userName = this.userName
        if (!img) {
          document.getElementById('pic').src = '../style/img/1.png'
        }
      }).catch(err => {
        console.log(err)
      })
      getStore().then(res => {
        this.store = res.data.data
      }).catch(err => {
        console.log(err)
      })
    },
    toPhone (row) {
      console.log(row)
      window.location.href = 'tel:' + row
    },
    toWebsite (row) {
      console.log(row)
      window.location.href = row
    },
    search  () {

    },
    // TODO: 接口没提供
    selectOne (n) {
      switch (n) {
        case 1: this.type = 1
          break
        case 2: this.type = 2
          break
        case 3: this.type = 3
          break
        case 4: this.type = 4
          break
      }
    }
  }
}
</script>

<style scoped>
.body {
  width: 100%;
  min-height: 800px;
  height: auto;
  background: #fff;
}
.news {
  margin: auto;
  width: 94%;
  padding-left:20px;
  padding-right: 20px;
  background: #fff;
  border-radius: 10px;
  border: solid 4px white;
}
.boxShadow {
  margin: auto;
  width: 91.7%;
  box-shadow: 0 0 20px #ccc;
}
.address {
  display: inline-block;
  width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 15px;
}
.small {
  width: 25%;
  height: 70%;
  margin: 4% 5% 0 3%;
  float: left;
  border-radius: 5px;
  background: rgba(240, 128, 128, 0.6);
}
#firstHeader {
  background-color: #e6ecf0;
}
.leftPic {
  width: 9rem;
  height: 9rem;
  float: left;
  border-radius: 6px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  margin-left: -20%;
}
.pic {
  position: relative;
  /* left: 20px; */
}
.details {
  position: relative;
  bottom: 5px;
}
.topbar {
  /* background-color: #ffffff; */
  height: 50px;
  position: relative;
}
.list {
  margin: auto;
  border-bottom: solid 1px #eceef0;
  height: 84px;
  background: white;
  line-height: 65px;
}
.leftIcon {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  margin: 20px 0 0 15px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  float: left;
  background-position: center !important;
}
.purple {
  font-size: 19px;
  float: left;
  line-height: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
  padding-left: 10px;
}
.mopic {
  margin: 37px 17px 0 7px;
  float: right;
  background-image: url(../style/img/sign.png);
  background-size: 100% 100%;
  width: 5px;
  height: 10px;
}
.onePurple {
  line-height: 84px;
  float: right;
  font-size: 14px;
  color: grey;
}

.fl {
  float: left;
}
.member {
  width: 93%;
  margin: auto;
  margin-left: 3.5%;
  margin-top: 30px;
  font-size: 17px;
  color: grey;
  margin-bottom: 20px;
}
.morepic {
  margin: 3px 5px 0 3px;
  float: right;
  background-image: url(../style/img/sign.png);
  background-size: 100% 100%;
  width: 5px;
  height: 10px;
}
.rightMore {
  float: right;
  font-size: 15px;
  color: rgb(204, 204, 204);
}
img {
  vertical-align: top;
}
.egret-header-box {
  height: 50px;
}

.egret-img img {
  height: 4.3rem;
  padding: 8px;
}
.at-content {
  position: relative;
  left: 20px;
}
.egret-header-search {
  display: inline-block;
  width: 200x;
  background-color: #e5e5e5;
  position: absolute;
  left: 50px;
  right: 80px;
  height: 34px;
  margin-top: 8px;
  border-radius: 4px;
}

.egret-header-search img {
  margin-left: 15px;
  height: 20px;
  margin-top: 7px;
}

.egret-header-search input {
  width: 160px;
  background-color: #e5e5e5;
  line-height: 24px;
  font-size: 15px;
  padding-top: 5.5px;
  border: none;
  outline: none;
}
.btn-search {
  width: 60px;
  height: 30px;
  padding: 6px;
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  line-height: 20px;
  background: rgb(249, 119, 130);
  background: linear-gradient(to right, rgba(240, 84, 73, 60%),rgba(240, 89, 67, 75%),rgba(237, 56, 99, 70%),rgba(238, 57, 98, 80%),rgba(237, 56, 99, 80%));
  border: none;
  font-size: 16px;
  color: white;
  outline: none;
}
.egret-switchframe div {
  width: 50%;
  display: inline-block;
  color: #fff;
  background-color: #d43c33;
}
.category{
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #dddfe3;
}
.tab{
  width: 25%;
  height: 25px;
  line-height: 25px;
  text-align: center;
}
.tab:after {
  background: #d43c33;
}
.tab-line{
  border-right: 1px solid rgba(0,0,0,.3);
}
.news {
  width: 91.7%;
  margin-left: 3%;
  border-radius: 0 0 10px 10px;
  border: solid 4px white;
}

.todeList {
  min-height: 160px;
  height: auto;
  padding-bottom: 3px;
  border-bottom: solid 1px #eceef0;
  background: white;
}

.small3 {
  width: 30%;
  height: 78%;
  margin: 4% 5% 0 5%;
  float: left;
  border-radius: 5px;
}

.leftPic3 {
  width: 108%;
  height: 96%;
  float: left;
  border-radius: 5px;
  background: url(../style/img/3.png);
  background-size: cover !important;
  margin-left: -4%;
}

.rightFont {
  width: 60%;
  min-height: 80%;
  height: auto;
  margin-top: 2.5%;
  float: left;
  /* padding: 10px; */
}

.title {
  width: 100%;
  min-height: 23%;
  font-size: 13px;
  line-height: 20px;
}

.fontWeight {
  font-size: 18px;
}

.colorGrey {
  color: grey;
}

.lineHeight {
  line-height: 30px;
}

.backGrey {
  padding: 2px;
  border-radius: 3px;
  background: rgb(250, 249, 247);
}

.position {
  color: rgb(204, 204, 204);
  /* position: relative; */
  /* margin-top: 5px; */
}

.discount {
  background: rgba(255, 169, 103, 1);
  color: white;
}

.cricle1 {
  width: 24px;
  height: 24px;
  background: url(../style/img/call.png);
  border: 1px solid rgba(238, 238, 238, 1);
  border-radius: 50%;
  opacity: 1;
  float: left;
  background-size: cover;
  margin-top: -5px;
}

.cricle2 {
  width: 24px;
  height: 24px;
  background: url(../style/img/website.png);
  background-size: cover;
  border: 1px solid rgba(238, 238, 238, 1);
  border-radius: 50%;
  opacity: 1;
  float: left;
  margin-left: 4px;
  margin-top: -5px;
}

.tel {
  float: left;
  margin-right: 10px;
}
</style>
